<template>
  <div class="box">
    <div class="box1">

      <el-form ref="form" :rules="rules" :model="form" label-width="80px" >
        <el-form-item label="用户名" prop="navname">
          <el-input v-model="form.navname"style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="region">
          <el-input type="primary" v-model="form.region"style="width: 300px"></el-input>
        </el-form-item>
        <template>
          <el-checkbox v-model="checked">超级管理员</el-checkbox>
        </template>
        <el-form-item class="box2">
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="oncink">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {dologin,administrator} from '@/api/index'
export default {
  name: "Login.vue",
    data() {
      return {
        form: {
          navname: '',
          region: '',
        },
        checked:false,//是否超级管理员登录
        rules: {
          navname: [
            {
              required: true,
              message:'必须要英文开头',
              pattern:/[a-zA-Z]\w{3,7}/,
              trigger: 'blur'
            },
          ],
          region: [
            {
              required: true,
              pattern:/[a-zA-Z]\w{3,7}/,
              message:'填写密码',
              trigger: 'blur'
            }
          ],
        }

      }
    },
  methods:{
    onSubmit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
          //判断是否是超级管理员
            if (this.checked){
              administrator(this.form).then(res=>{
                if(res.data.code===200){
                  //缓存用户信息
                  this.$store.commit('LOIN',res.data.data)

                  //超级管理员登录
                  this.$store.dispatch('PSUST').then(res=>{

                    localStorage.setItem('meuns',JSON.stringify(res.menus))
                    localStorage.setItem('routes',JSON.stringify(res.routes))

                    this.$store.commit('INT',res.menus)
                    //将动态路由添加到路由中
                    this.$store.commit('SETROST',res.routes)
                    this.$message({
                      type: '登录成功',
                      duration:1500,
                      onClose:()=>{
                        //登录成功到首页
                        this.$router.push('/meter')
                      }
                    });
                  })
                }
              })

            }else {
              //普通管理员
              dologin(this.form).then(res=>{
                if(res.data.code===200){
                  //缓存用户信息
                  this.$store.commit('LOIN',res.data.data)
                  //超级管理员登录
                  this.$store.dispatch('PSUS1').then(res=>{
                    localStorage.setItem('meuns',JSON.stringify(res.menus))
                    localStorage.setItem('routes',JSON.stringify(res.routes))
                    this.$store.commit('INT',res.menus)
                    //将动态路由添加到路由中
                    this.$store.commit('SETROST',res.routes)
                    this.$message({
                      type: '登录成功',
                      duration:1500,
                      onClose:()=>{
                        //登录成功到首页
                        this.$router.push('/meter')
                      }
                    });
                  })

                }
              })
            }
          } else {
            return false;
          }
        });
      },
    oncink(){
      this.$refs.form.resetFields();
    }
    }
}
</script>

<style lang="scss" scoped>
.box{
  height: 800px;
  display: flex;
  justify-content: center;
  align-items:center;
  .box1{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 500px;
    height: 600px;
    background-color: #42b983;
  }

  .box2{
    display: flex;
    justify-content: center;
  }
}
</style>
